<script setup>
import { onUnmounted, ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import {
  archives,
  realTimeLocation,
  getInsideRobot,
} from "@/api/inspection/robot-list";
import { inspectionTask } from "@/api/inspection/task-manage.js";
import { inspectionMap } from "@/api/inspection/resource-manage.js";
import StartPointPositionDialog from "./components/StartPointPositionDialog.vue";
import HomeMapKonva from "./components/HomeMapKonva.vue";
import MainContainer from "@/components/MainContainer.vue";
import InspectionLeftList from "./components/InspectionLeftList.vue";
import InspectionRightList from "./components/InspectionRightList.vue";
import { robotTypes } from "./utils/index.js";

const robot = reactive({
  type: robotTypes.OUTSIDE,
  list: [],
  active: null,
});

watch(
  () => robot.type,
  (val) => {
    getRobotList(val);
  }
);

async function getRobotList(type) {
  const {
    data: { list = [] },
  } = await archives.getRobotAndCompany({ RType: type });
  robot.list = list;
  if (robot.list.length > 0) {
    const { id, code } = robot.list[0];
    selectRobot(id, code);
  }
}
function selectRobot(id, code) {
  robot.active = id;
  getInspectionTaskList({
    activeStatus: 1,
    rid: code,
    type: 1,
    limit: 100,
  });
}

getRobotList(robotTypes.OUTSIDE);

// 巡检任务列表
let taskTimer;
const inspectionTaskList = ref([]);
async function getInspectionTaskList(params) {
  clearTimeout(taskTimer);
  const {
    data: { list = [] },
  } = await inspectionTask.read(params);
  inspectionTaskList.value = list.reverse();
  taskTimer = setTimeout(() => {
    getInspectionTaskList(params);
  }, 2000);
}

// 当前巡检任务
const activeInspectionTask = ref(null);
async function selectActiveInspectionTas(id, mid, rid) {
  clearTimeout(timer);
  activeInspectionTask.value = id;
  const { data } = await inspectionMap.read({ id: mid });
  const { url } = data.list[0];
  await konva.value.initImage(url);
  realTimeUpdatePath(id, rid);
}

// 实时更新路线
let timer;
async function realTimeUpdatePath(id, rid) {
  clearTimeout(timer);
  const {
    data: { taskRaw, locations = [] },
  } = await realTimeLocation(id, rid);
  konva.value.previewPath(JSON.parse(taskRaw));
  konva.value.realTimePath(locations || []);
  timer = setTimeout(() => {
    realTimeUpdatePath(id, rid);
  }, 2000);
}

const konva = ref(null);

// 起点坐标
const startPointPositionDialogVisible = ref(false);
const startPointPositionCode = ref("");
function openStartPointPositionDialog(code) {
  startPointPositionCode.value = code;
  startPointPositionDialogVisible.value = true;
}

// 进入操控端
const router = useRouter();
function enterControl(id, type = "outsideInspection") {
  router.push({ name: "inspection-control", query: { id, rType: type } });
}

const insideRobotList = ref([]);
async function fetchInsideRobot() {
  const { data } = await getInsideRobot();
  insideRobotList.value = data.list || [];
}
fetchInsideRobot();

onUnmounted(() => {
  clearTimeout(timer);
  clearTimeout(taskTimer);
});
</script>

<template>
  <MainContainer>
    <el-container class="h-full">
      <el-aside>
        <InspectionLeftList
          v-model:active-name="robot.type"
          :list="robot.list"
          :active-robot="robot.active"
          @open="openStartPointPositionDialog"
          @enter="enterControl"
          @select="selectRobot"
        ></InspectionLeftList>
      </el-aside>
      <el-main class="p-0">
        <HomeMapKonva ref="konva"></HomeMapKonva>
      </el-main>
      <el-aside class="w-96">
        <InspectionRightList
          :task-list="inspectionTaskList"
          @select="selectActiveInspectionTas"
        ></InspectionRightList>
      </el-aside>
    </el-container>
    <StartPointPositionDialog
      v-model:visible="startPointPositionDialogVisible"
      :code="startPointPositionCode"
    />
  </MainContainer>
</template>
